<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ES6新语法</title>
    <script>
        //1. let与var区别
        //let: 代表定义局部变量
        //var: 代表定义全局变量
        function test01(){
            {
                let a = 10
                var b = 5
            }
            // console.log("a = ", a)
            console.log("b = ", b)
        }
        //2. const定义常量,常量值不能修改它
        function test02(){
            const a = 10
            a = 30
        }
        //3. 解构表达式-对数组的解构
        function test03(){
            let arr = [1,2,3]
            const [a,b,c] = arr
            console.log("a = ",a,",b = ",b,",c = ",c)
        }
        //4. 解构表达式-对对象的解构（版本一）
        function test04(){
            //4.1 定义对象
            const person = {
                name: '张三',
                age: 20,
                habby:["ball","swim","song"]
            }
            //4.2 解构对象
            //说明：将对象person中的name属性赋值给n变量，将age属性赋值给a变量，将habby属性赋值给h变量
            const {name:n,age:a,habby:h} = person
            console.log("name=",n,",age=",a,",habby=",h)
        }
        //4. 解构表达式-对对象的解构（版本二）
        function test05(){
            //4.1 定义对象
            const person = {
                name: '张三',
                age: 20,
                habby:["ball","swim","song"]
            }
            //4.2 解构对象 (简化赋值)
            //说明：
            // ① 将对象person的name属性赋值给同名变量name
            // ② 将对象person的age属性赋值给同名变量age
            // ① 将对象person的habbye属性赋值给同名变量habby
            const {name,age,habby} = person
            console.log("name=",name,",age=",age,",habby=",habby)
        }
        //5. 字符串扩展方法
        function test06(){
            //5.1  定义字符串
            let str = "hello,world"
            //5.1 是否包含某个字符
            let b = str.includes("l");
            console.log("b = ",b)
            //5.2 是否以指定字符串开头
            b = str.startsWith("he");
            console.log("b = ",b)
            //5.3 是否以指定字符串结尾
            b = str.endsWith("aa")
            console.log("b = ",b)
        }
        //6. 模板字符串
        function test07(){
            //6.1 定义字符串(第一种用法，原样输出)
            let str = `
                <h1>hello</h1>
                <pre>你好！</pre>
            `
            console.log(str)
            //6.2 模板字符串中使用${变量}，避免字符串的嵌套
            let name = '小张'
            let age = 20
            str = `你好，${name},你今年${age}岁了！`
            console.log(str)
        }
        //7. 默认值函数 (过去的做法)
        function test08(a,b){
            b = b || 1
            return a + b
        }
        //8. 默认值函数 (现在的做法)
        function test09(a,b=1){
            return a + b
        }
        //9. 变长参数
        function test10(...args){
            let sum = 0
            for (let i = 0;i < args.length;i++){
                sum += args[i]
            }
            return sum
        }
        //10. 箭头函数
        //10.1 无参的箭头函数
        let test11 = () => console.log("hello,箭头函数")
        //10.2 一个参数的箭头函数
        let test12 = name => console.log("你好，",name)
        //10.3 多个参数的箭头函数
        let test13 = (a,b) => a + b
        //10.4 箭头函数结合解构表达式
        let test14 = ({name,age,habby}) => {
            console.log("name:",name)
            console.log("age:",age)
            console.log("habby:",habby)
        }
        //11. 对对象的优化
        function test15(){
            console.log("对象的keys：",Object.keys(person))
            console.log("对象的values：",Object.values(person))
            console.log("对象的Entry：",Object.entries(person))
        }
        //12. 函数的简化写法：（版本一：箭头函数版本）
        let test15_1 = ()=>{
            test15()
        }
        //13. 函数的简化写法：（版本二：简化版本）
        const stud = {
            sayHello1(){    // 此种写法将来在vue中最经常使用
                console.log("大家好，箭头函数的写法！")
            },
            sayHello2: ()=>{
                console.log("大家好，这是函数的简化写法！")
            }
        }
        //14. 对象的深拷贝
        function test16(){
            //14.1 对象复制
            let person = {name:"小张",age:20}
            let someone = person
            // someone.name = "小李"
            // console.log(person.name)
            //14.2 对象的深拷贝复制 (方法一：新式做法)
            // someone = {...person}
            // someone.name = "小李"
            // console.log(person.name)
            //14.3 对象的深拷贝复制 (方法二：老式做法)
            someone = JSON.parse(JSON.stringify(person))  // JSON.stringify(): 将json对象转换为字符串 JSON.parse()将json字符串转换为对象
            someone.name = "小李"
            console.log(person.name)
        }
        //15. map用法: 对数组中的元素进行处理
        function test17(){
            //15.1 定义一个数组
            let arr = [1,2,3]
            //15.2 对原数组每个元素乘以2
            let arr2 = arr.map(m => {
                return m * 2
            })
            console.log(arr2)
        }
        //16. filter用法：对数组中的元素进行过滤
        function test18(){
            //16.1 定义一个数组
            let arr = [1,2,3]
            //16.2 对数组元素进行过滤
            let arr2 = arr.filter(f => {
                return f >= 2
            })
            console.log(arr2)
        }
        //17. reduce用法：
        function test19(){
            //17.1 定义数组
            let arr = [1,2,3,4,5]
            //17.2 累加求和,初始值不设置就是0
            // return arr.reduce((a,b) => a + b)
            return arr.reduce((a,b) => a + b,1)     // 参数2：代表初始值
        }
        //18. findIndex（）:在数组中查找某个满足条件的元素的索引位置
        function test20(){
            //18.1 定义数组
            let arr = [1,2,3,4,5]
            let idx = arr.findIndex(e => {
                return e > 2
            })
            console.log("idx:",idx)
        }

        // test01()
        // test02()
        // test03()
        // test04()
        // test05()
        // test06()
        // test07()
        // console.log(test08(5))
        // console.log(test09(5))
        // console.log("sum = ",test10(1,2,3))
        // test11()
        // test12("小明")
        // console.log("sum = ",test13(1,2))
        const person = {
            name: '张三',
            age: 20,
            habby:["ball","swim","song"]
        }
        // test14(person)
        // test15()
        // test15_1()
        // stud.sayHello1()
        // stud.sayHello2()
        // test16()
        // test17()
        // test18()
        // console.log(test19())
        test20()
    </script>
</head>
<body>

</body>
</html>